<template>
  <div class="fillup">
    <div class="fillup-content" v-if="!success">
      <div class="fillup-header">
        <div class="fillup-title">
          需要完善正确信息并审核通过后方可正常使用系统
        </div>
        <div class="fillup-approvalReason" v-if="approval.approvalStatus === 2">
          您的资料审核失败，请重新填写后提交<br />
          {{ approval.approvalReason }}
        </div>
      </div>
      <router-view @success="handleSuccess" />
      <img class="fillup-img" src="@/assets/img/fillup-img.png" alt="" />
    </div>
    <Success v-else />
  </div>
</template>

<script>
import Success from './Success'
import { mapState } from 'vuex'
export default {
  name: 'Fillup',
  components: { Success },
  data() {
    return {
      success: false
    }
  },
  computed: {
    ...mapState(['approval'])
  },
  methods: {
    handleSuccess(code) {
      this.success = true
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.fillup {
  height: 100%;
  overflow: auto;
  .fillup-content {
    margin: 2.3rem auto;
    width: 10.28rem;
    background-color: #fff;
    border-radius: 16px;
    text-align: center;
    position: relative;
    padding: 0.69rem 2rem 0.4rem;
    .fillup-img {
      position: absolute;
      top: -0.68rem;
      left: 0;
      right: 0;
      margin: auto;
      width: 1.23rem;
      height: 1.23rem;
    }
    .fillup-header {
      margin-bottom: 0.41rem;
    }
    .fillup-title {
      color: $colorText2;
    }
    .fillup-approvalReason {
      margin-top: 0.1rem;
      width: 100%;
      padding: 5px;
      line-height: 1.5em;
      background: #fff8f8;
      border: 1px solid #febfbf;
      border-radius: 23px;
      font-size: 12px;
      color: #f95656;
      @include flexCenter();
    }
  }
}
</style>
